<script setup lang="ts">
const isMaxSize = ref(false);

function handelMinimize() {
  window.windows.minimize();
}
function handelMaximize() {
  window.windows?.maximize();
  isMaxSize.value = true;
}
function handelUnMaximize() {
  window.windows?.unmaximize();
  isMaxSize.value = false;
}
function handelClose() {
  window.windows?.close();
}

onMounted(() => {
  window.windows.onIsMaximize((_event: any, value: any) => {
    isMaxSize.value = value;
  });
});
</script>

<template>
  <div class="close-bar">
    <span class="title">迷夜综合客服系统 v0.0.1</span>
    <div class="bar-opt">
      <span class="item" @click="handelMinimize">
        <i class="iconfont icon-minimize"></i>
      </span>
      <span class="item" @click="handelUnMaximize" v-if="isMaxSize">
        <i class="iconfont icon-unmaximize"></i>
      </span>
      <span class="item" @click="handelMaximize" v-else>
        <i class="iconfont icon-maximize"></i>
      </span>
      <span class="item close-item" @click="handelClose">
        <i class="iconfont icon-close"></i>
      </span>
    </div>
  </div>
</template>

<style lang="scss">
.close-bar {
  height: 30px;
  line-height: 30px;
  -webkit-app-region: drag;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  justify-content: center;

  .title {
    color: #666;
    font-size: 14px;
  }

  .bar-opt {
    -webkit-app-region: no-drag;
    position: absolute;
    right: 0;

    .item {
      margin: 0 10px;
      padding: 0 3px;
      width: 24px;
      height: 24px;
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 3px;
      cursor: pointer;
      &:hover {
        background-color: rgb(146, 146, 146);
        i {
          color: #fff;
        }
      }

      i {
        font-weight: bold;
        display: inline-block;
      }
    }

    .close-item {
      &:hover {
        background-color: rgb(251, 115, 115);
        i {
          color: #fff;
        }
      }
    }
  }
}
</style>
